<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>摇骰子游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#D4AF37', // 金色主题
                        secondary: '#1A365D', // 深蓝色背景
                        dark: '#0F172A',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }
            .gold-gradient {
                background: linear-gradient(135deg, #D4AF37 0%, #F9F292 50%, #D4AF37 100%);
            }
            .dice-shadow {
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 
                            inset 0 2px 4px rgba(255, 255, 255, 0.2),
                            inset 0 -2px 4px rgba(0, 0, 0, 0.2);
            }
            .animate-shake {
                animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) infinite;
            }
            .animate-roll {
                animation: roll 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0) rotate(0deg); }
            20% { transform: translateX(-5px) rotate(-5deg); }
            40% { transform: translateX(5px) rotate(5deg); }
            60% { transform: translateX(-3px) rotate(-3deg); }
            80% { transform: translateX(3px) rotate(3deg); }
        }
        
        @keyframes roll {
            0% { transform: scale(0.8) rotate(0deg); opacity: 0.7; }
            50% { transform: scale(1.1) rotate(180deg); opacity: 0.9; }
            100% { transform: scale(1) rotate(360deg); opacity: 1; }
        }
    </style>
    
    <style>
        body {
            background-color: #4b6cb7;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(26, 54, 93, 0.2) 0%, transparent 20%),
                radial-gradient(circle at 80% 70%, rgba(26, 54, 93, 0.2) 0%, transparent 20%);
            overscroll-behavior: contain;
            touch-action: manipulation;
        }
        
        /* 骰子样式 */
        .dice {
            position: relative;
            width: 60px;
            height: 60px;
            background-color: white;
            border-radius: 8px;
            transition: all 0.2s ease;
        }
        
        @media (min-width: 640px) {
            .dice {
                width: 80px;
                height: 80px;
            }
        }
        
        /* 骰子点数 */
        .dot {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: black;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
        
        @media (min-width: 640px) {
            .dot {
                width: 16px;
                height: 16px;
            }
        }
        
        /* 历史记录滚动条 */
        .history-scrollbar::-webkit-scrollbar {
            width: 4px;
        }
        
        .history-scrollbar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }
        
        .history-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(212, 175, 55, 0.5);
            border-radius: 4px;
        }
        
        .history-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgba(212, 175, 55, 0.8);
        }
    </style>
</head>
<body class="min-h-screen flex flex-col items-center justify-start p-4 text-light font-sans">
    <!-- 游戏容器 -->
    <div class="w-full max-w-2xl mx-auto flex flex-col items-center">
        <!-- 游戏标题 -->
        <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-center my-6 bg-clip-text gold-gradient text-shadow">
            摇骰子游戏
        </h1>
        
        <!-- 骰子数量设置 -->
        <div class="w-full bg-secondary/30 backdrop-blur-sm rounded-xl p-4 mb-6 shadow-lg">
            <div class="flex flex-col md:flex-row items-center justify-between gap-4">
                <div class="flex items-center gap-2">
                    <i class="fa fa-sliders text-primary text-xl"></i>
                    <h2 class="text-xl font-semibold">骰子数量: <span id="diceCountDisplay" class="text-primary">3</span></h2>
                </div>
                
                <div class="w-full md:w-2/3">
                    <input 
                        type="range" 
                        id="diceCountSlider" 
                        min="1" 
                        max="6" 
                        value="3" 
                        class="w-full h-2 bg-dark/50 rounded-lg appearance-none cursor-pointer accent-primary"
                    >
                </div>
            </div>
        </div>
        
        <!-- 骰子区域 -->
        <div id="diceContainer" class="w-full bg-secondary/20 backdrop-blur-sm rounded-xl p-6 mb-6 min-h-[120px] flex justify-center items-center gap-3 md:gap-5 flex-wrap shadow-lg">
            <!-- 骰子将通过JS动态生成 -->
        </div>
        
        <!-- 结果区域 -->
        <div class="w-full bg-secondary/20 backdrop-blur-sm rounded-xl p-4 mb-6 text-center shadow-lg">
            <p class="text-lg mb-2">总和: <span id="totalSum" class="text-primary text-2xl font-bold">0</span></p>
        </div>
        
        <!-- 控制按钮 -->
        <div class="w-full flex justify-center gap-4 mb-8">
            <button id="shakeBtn" class="gold-gradient text-dark font-bold py-3 px-8 rounded-lg shadow-lg hover:shadow-primary/30 transition-all transform hover:scale-105 active:scale-95 min-w-[100px]">
                摇
            </button>
            <button id="openBtn" class="bg-dark text-primary border-2 border-primary font-bold py-3 px-8 rounded-lg shadow-lg hover:bg-primary/10 transition-all transform hover:scale-105 active:scale-95 min-w-[100px]">
                开
            </button>
        </div>
        
        <!-- 历史记录 -->
        <div class="w-full bg-secondary/20 backdrop-blur-sm rounded-xl p-4 shadow-lg">
            <div class="flex items-center gap-2 mb-3">
                <i class="fa fa-history text-primary"></i>
                <h2 class="text-xl font-semibold">历史记录</h2>
            </div>
            
            <div id="historyContainer" class="max-h-[200px] overflow-y-auto history-scrollbar space-y-2">
                <!-- 历史记录将通过JS动态生成 -->
                <p class="text-center text-light/60 text-sm italic">暂无记录</p>
            </div>
        </div>
        
        <!-- 操作提示 -->
        <div class="mt-6 text-center text-light/60 text-sm">
            <p class="mb-1">键盘: 空格键切换摇晃/开盅</p>
            <p>触摸: 长按骰子区域摇晃，松开显示结果</p>
        </div>
    </div>

    <script>
        // 骰子游戏主类
        class DiceGame {
            constructor() {
                // DOM元素
                this.diceCountSlider = document.getElementById('diceCountSlider');
                this.diceCountDisplay = document.getElementById('diceCountDisplay');
                this.diceContainer = document.getElementById('diceContainer');
                this.shakeBtn = document.getElementById('shakeBtn');
                this.openBtn = document.getElementById('openBtn');
                this.totalSumElement = document.getElementById('totalSum');
                this.historyContainer = document.getElementById('historyContainer');
                
                // 游戏状态
                this.diceCount = 3;
                this.isShaking = false;
                this.diceValues = [];
                this.history = [];
                
                // 初始化
                this.initDice();
                this.setupEventListeners();
            }
            
            // 初始化骰子
            initDice() {
                this.diceContainer.innerHTML = '';
                this.diceValues = [];
                
                for (let i = 0; i < this.diceCount; i++) {
                    this.diceValues.push(1);
                    const diceElement = this.createDiceElement(1);
                    this.diceContainer.appendChild(diceElement);
                }
                
                this.updateTotalSum();
            }
            
            // 创建骰子元素
            createDiceElement(value) {
                const dice = document.createElement('div');
                dice.className = 'dice dice-shadow';
                dice.innerHTML = this.getDiceDotsHTML(value);
                return dice;
            }
            
            // 获取骰子点数HTML
            getDiceDotsHTML(value) {
                // 根据点数位置创建不同的点布局
                const positions = {
                    1: [[50, 50]],
                    2: [[25, 25], [75, 75]],
                    3: [[25, 25], [50, 50], [75, 75]],
                    4: [[25, 25], [25, 75], [75, 25], [75, 75]],
                    5: [[25, 25], [25, 75], [50, 50], [75, 25], [75, 75]],
                    6: [[25, 25], [25, 50], [25, 75], [75, 25], [75, 50], [75, 75]]
                };
                
                let html = '';
                positions[value].forEach(([x, y]) => {
                    html += `<span class="dot" style="left: ${x}%; top: ${y}%"></span>`;
                });
                
                return html;
            }
            
            // 设置事件监听
            setupEventListeners() {
                // 骰子数量滑块
                this.diceCountSlider.addEventListener('input', (e) => {
                    this.diceCount = parseInt(e.target.value);
                    this.diceCountDisplay.textContent = this.diceCount;
                    this.initDice();
                });
                
                // 摇按钮
                this.shakeBtn.addEventListener('click', () => this.startShaking());
                
                // 开按钮
                this.openBtn.addEventListener('click', () => this.stopShaking());
                
                // 键盘事件 - 空格键
                document.addEventListener('keydown', (e) => {
                    if (e.code === 'Space') {
                        e.preventDefault();
                        if (this.isShaking) {
                            this.stopShaking();
                        } else {
                            this.startShaking();
                        }
                    }
                });
                
                // 触摸事件 - 骰子区域
                let touchTimer;
                this.diceContainer.addEventListener('touchstart', (e) => {
                    e.preventDefault();
                    if (!this.isShaking) {
                        // 稍微延迟开始，避免误触
                        touchTimer = setTimeout(() => {
                            this.startShaking();
                        }, 150);
                    }
                }, { passive: false });
                
                this.diceContainer.addEventListener('touchend', (e) => {
                    e.preventDefault();
                    clearTimeout(touchTimer);
                    if (this.isShaking) {
                        this.stopShaking();
                    }
                }, { passive: false });
                
                this.diceContainer.addEventListener('touchcancel', () => {
                    clearTimeout(touchTimer);
                    if (this.isShaking) {
                        this.stopShaking();
                    }
                });
            }
            
            // 开始摇晃骰子
            startShaking() {
                if (this.isShaking) return;
                
                this.isShaking = true;
                this.shakeBtn.disabled = true;
                this.shakeBtn.classList.add('opacity-50', 'cursor-not-allowed');
                this.shakeBtn.classList.remove('hover:scale-105', 'active:scale-95');
                
                // 添加摇晃动画
                const diceElements = this.diceContainer.querySelectorAll('.dice');
                diceElements.forEach(dice => {
                    dice.classList.add('animate-shake');
                });
                
                // 随机变化骰子点数
                this.shakeInterval = setInterval(() => {
                    this.diceValues = this.diceValues.map(() => Math.floor(Math.random() * 6) + 1);
                    this.updateDiceDisplay(false);
                }, 100);
            }
            
            // 停止摇晃骰子并显示结果
            stopShaking() {
                if (!this.isShaking) return;
                
                clearInterval(this.shakeInterval);
                this.isShaking = false;
                this.shakeBtn.disabled = false;
                this.shakeBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                this.shakeBtn.classList.add('hover:scale-105', 'active:scale-95');
                
                // 生成最终结果
                this.diceValues = this.diceValues.map(() => Math.floor(Math.random() * 6) + 1);
                
                // 移除摇晃动画，添加开盅动画
                const diceElements = this.diceContainer.querySelectorAll('.dice');
                diceElements.forEach(dice => {
                    dice.classList.remove('animate-shake');
                    dice.classList.add('animate-roll');
                    
                    // 动画结束后移除类
                    setTimeout(() => {
                        dice.classList.remove('animate-roll');
                    }, 800);
                });
                
                // 更新显示并计算总和
                this.updateDiceDisplay(true);
                this.updateTotalSum();
                
                // 保存到历史记录
                this.saveToHistory();
            }
            
            // 更新骰子显示
            updateDiceDisplay(showValues) {
                const diceElements = this.diceContainer.querySelectorAll('.dice');
                
                // 如果骰子数量变化，重新创建骰子
                if (diceElements.length !== this.diceCount) {
                    this.initDice();
                    return;
                }
                
                // 更新每个骰子的点数
                diceElements.forEach((dice, index) => {
                    // 如果正在摇晃且不需要显示真实值，则显示随机点数
                    const displayValue = showValues ? this.diceValues[index] : Math.floor(Math.random() * 6) + 1;
                    dice.innerHTML = this.getDiceDotsHTML(displayValue);
                });
            }
            
            // 更新总和显示
            updateTotalSum() {
                const sum = this.diceValues.reduce((acc, val) => acc + val, 0);
                this.totalSumElement.textContent = sum;
                return sum;
            }
            
            // 保存到历史记录
            saveToHistory() {
                const sum = this.updateTotalSum();
                const record = {
                    values: [...this.diceValues],
                    sum: sum,
                    time: new Date()
                };
                
                // 添加到历史记录并限制最多10条
                this.history.unshift(record);
                if (this.history.length > 10) {
                    this.history.pop();
                }
                
                // 更新历史记录显示
                this.updateHistoryDisplay();
            }
            
            // 更新历史记录显示
            updateHistoryDisplay() {
                if (this.history.length === 0) {
                    this.historyContainer.innerHTML = '<p class="text-center text-light/60 text-sm italic">暂无记录</p>';
                    return;
                }
                
                this.historyContainer.innerHTML = '';
                
                this.history.forEach((record, index) => {
                    const recordElement = document.createElement('div');
                    recordElement.className = 'flex items-center justify-between p-2 bg-dark/30 rounded-lg';
                    
                    // 构建骰子点数显示
                    let diceHtml = '';
                    record.values.forEach(value => {
                        diceHtml += `<span class="inline-flex items-center justify-center w-6 h-6 bg-white text-black rounded-md text-xs mr-1">${value}</span>`;
                    });
                    
                    // 格式化时间
                    const timeStr = record.time.toLocaleTimeString();
                    
                    recordElement.innerHTML = `
                        <div class="flex items-center">
                            <span class="text-primary mr-2">${index + 1}.</span>
                            <div class="flex">${diceHtml}</div>
                        </div>
                        <div class="text-right">
                            <span class="text-primary font-bold">${record.sum}</span>
                            <span class="text-light/50 text-xs ml-2">${timeStr}</span>
                        </div>
                    `;
                    
                    this.historyContainer.appendChild(recordElement);
                });
            }
        }
        
        // 页面加载完成后初始化游戏
        window.addEventListener('load', () => {
            const game = new DiceGame();
        });
    </script>
</body>
</html>
